<template>
    <div>
            <el-dialog
                    :title='title'
                    class='c-dialog-fixed'
                    :visible.sync='show'
                    :append-to-body='inDialog'
                    top='200px'
                    @open='openDialog'
                    @close='closeDialog'>
            <div v-loading='loading'>
                <div>
                    <divider title='请求头'></divider>
                    <el-container>
                        <el-main>
                            <json-viewer
                                    :value="header"
                                    :expand-depth=5
                                    copyable
                                    boxed
                                    sort></json-viewer>
                        </el-main>
                    </el-container>
                </div>
                <div>
                    <divider title='QUERY参数'></divider>
                    <el-container>
                        <el-main>
                            <json-viewer
                                    :value="query"
                                    :expand-depth=5
                                    copyable
                                    boxed
                                    sort></json-viewer>
                        </el-main>
                    </el-container>
                </div>
                <div>
                    <divider title='请求信息'></divider>
                    <el-container>
                        <el-main>
                            <json-viewer
                                    :value="request_data"
                                    :expand-depth=5
                                    copyable
                                    boxed
                                    sort></json-viewer>
                        </el-main>
                    </el-container>
                </div>
                <div>
                    <divider title='响应信息'></divider>
                    <el-container>
                        <el-main>
                            <json-viewer
                                    :value="response_data"
                                    :expand-depth=5
                                    copyable
                                    boxed
                                    sort></json-viewer>
                        </el-main>
                    </el-container>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="show=false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
  import api from '@/api/api/channel'
  import menuList from '@/components/sys/menu/treeList'
  import JsonViewer from 'vue-json-viewer'

  const formInit = {
    id: null,
    username: '',
    password: '',
    ip: '',
    create_time: '',
    status: ''
  }
  export default {
    components: {
      menuList,
      JsonViewer
    },
    props: {
      inDialog: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        status: {
          1: '启用',
          0: '不启用'
        },
        resolve: null,
        show: false,
        loading: false,
        updated: false,
        data: {},
        factoryList: [],
        companyList: [],
        roleList: [],
        form: {...formInit},
        request_data: {},
        response_data: {},
        header:{},
        query:{},
        rules: {
          name: [{required: true, message: '请填写角色名称'}]
        },
        updated: false,
        initMenu: false,
      }
    },
    computed: {
      isEdit() {
        return this.form.id ? true : false
      },
      title() {
        let title = '接口详情'
        return title
      }
    },
    mounted() {

    },
    methods: {
      openDialog() {
        this.$nextTick(() => {
          if (this.resolve) {
            this.resolve(this)
          }
        })
      },
      open() {
        this.show = true
        return new Promise((resolve, reject) => {
          this.resolve = resolve
        })
      },
      closeDialog() {
        if (this.updated) {
          this.$emit('updated', this.form)
        }
        this.resetFields()
      },
      getForm(id) {
        this.loading = true
        api.getForm(id).then(res => {
          this.initData(res.data)
          this.loading = false
        })
      },
      initData(data) {
        this.assign(data)
        this.clearValidate()
      },
      assign(data) {
        console.log(data);
        this.form = {...this.form, ...data},
          this.response_data = JSON.parse(data.response)
          this.request_data = JSON.parse(data.request)
          this.query = JSON.parse(data.query)
          this.header = JSON.parse(data.header)
        console.log(this.form);
        return this
      },
      clearValidate() {
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate()
        })
      },
      resetFields() {
        this.updated = false
        this.form = {...formInit}
        console.log(this.form);
        this.clearValidate()
        return this
      },
      test() {

      }
    }
  }
</script>
